<template>
  <div
    class="el-progress"
    :class="[
      'el-progress--' + type,
      status ? 'is-' + status : '',
      {
        'el-progress--without-text': !showText,
        'el-progress--text-inside': textInside,
      }
    ]"
    role="progressbar"
    :aria-valuenow="percentage"
    aria-valuemin="0"
    aria-valuemax="100"
  >
    <div
      class="el-progress__text--line"
      v-if="showText && !textInside && type === 'line'"
      :class="{'danger': threshold > 0 && percentage > threshold}"
      :style="{fontSize: progressTextSize + 'px'}"
    >
      <template v-if="showNumber">{{usage === -1 ? $t('common.unknown') : usage + 'MB'}}</template>
      <template v-else-if="!status">{{content}}</template>
      <i v-else :class="iconClass"></i>
    </div>
    <div class="el-progress-bar" v-if="type === 'line'">
      <div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px'}">
        <div
          class="el-progress-bar__threshold"
          :style="{left: threshold + '%'}"
          v-if="threshold > 0"
        ></div>
        <div class="el-progress-bar__inner" :style="barStyle">
          <div class="el-progress-bar__innerText" v-if="showText && textInside">{{content}}</div>
        </div>
      </div>
    </div>
    <div class="el-progress-circle" :style="{height: width + 'px', width: width + 'px'}" v-else>
      <svg viewBox="0 0 100 100">
        <path
          class="el-progress-circle__track"
          :d="trackPath"
          stroke="#e5e9f2"
          :stroke-width="relativeStrokeWidth"
          fill="none"
          :style="trailPathStyle"
        />
        <path
          class="el-progress-circle__path"
          :d="trackPath"
          :stroke="stroke"
          fill="none"
          :stroke-linecap="strokeLinecap"
          :stroke-width="percentage ? relativeStrokeWidth : 0"
          :style="circlePathStyle"
        />
      </svg>
    </div>
    <div
      class="el-progress__text"
      v-if="showText && !textInside && type !== 'line'"
      :style="{fontSize: progressTextSize + 'px'}"
    >
      <template v-if="!status">{{content}}</template>
      <i v-else :class="iconClass"></i>
    </div>
  </div>
</template>

<script>
import { Progress } from '@toms/element-ui'
export default {
  extends: Progress,
  props: {
    threshold: {
      type: Number,
      default: -1
    },
    showNumber: {
      type: Boolean,
      default: false
    },
    usage: {
      type: Number,
      default: -1
    }
  },
  computed: {
    barStyle() {
      const style = {}
      style.width = this.percentage > 100 ? 100 + '%' : this.percentage + '%'
      style.backgroundColor = this.getCurrentColor(this.percentage)
      return style
    }
  },
  methods: {
    getCurrentColor(percentage) {
      console.log(this.threshold)
      if (typeof this.color === 'function') {
        return this.color(percentage)
      } else if (this.threshold > 0 && percentage > this.threshold) {
        return '#C55F50'
      } else if (typeof this.color === 'string') {
        return this.color
      } else {
        return this.getLevelColor(percentage)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-progress-bar__threshold {
  position: absolute;
  width: 6px;
  background: #95aac9;
  top: 50%;
  z-index: 1;
  height: 15px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
}
.el-progress__text--line {
  display: block;
  font-size: 18px !important;
  &.danger {
    color: #e63757;
  }
}
.el-progress-bar {
  padding-right: 0;
}
</style>